<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <div class="layui-tab-content">
          <form class="layui-form center">
            <div class="layui-form-item">
              <div class="layui-inline">
                  <label class="layui-form-label">用户ID</label>
                  <div class="layui-input-inline">
                      <input type="text" id="userId" name="userId" readonly="readonly" class="layui-input">
                  </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                  <input type="text" id="userName" name="userName" lay-verify="required" placeholder="入用户名" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">用户昵称</label>
                <div class="layui-input-inline">
                  <input type="text" id="nickName" name="nickName" lay-verify="required" placeholder="输入用户昵称" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-inline">
                <input type="password" id="passWord" name="passWord" lay-verify="pass" placeholder="不修改密码请留空" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">请填写8到16位字母和数字组合密码</div>
            </div>           
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                  <input type="text" id="email" name="email" lay-verify="email" placeholder="输入邮箱" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                  <input type="tel" id="mobile" name="mobile" lay-verify="phone" placeholder="输入手机号" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                  <label class="layui-form-label">超级管理</label>
                  <div class="layui-input-inline">
                      <input type="radio" name="isSuperAdmin" value="1" title="是">
                      <input type="radio" name="isSuperAdmin" value="0" title="否" checked="checked">
                  </div>
                  <div class="layui-form-mid layui-word-aux">超管拥有所有菜单权限</div>
              </div>
            </div>
              <div class="layui-form-item">
                  <div class="layui-inline">
                      <label class="layui-form-label">登录IP白名单</label>
                      <div class="layui-input-inline">
                          <textarea name="loginWhiteIp" id="loginWhiteIp" placeholder="请输入登录白名单,多个IP半角逗号分隔" class="layui-textarea"></textarea>
                      </div>
                  </div>
              </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="启用">
                        <input type="radio" name="status" value="0" title="停止">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-hide xxpayYesBtn" lay-submit="" lay-filter="userEdit">保存</button>
                </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>

<script>
    layui.use('form',function(){
        var form = layui.form
        ,$ = layui.$
        ,element = layui.element
        ,layer = layui.layer
        ,view = layui.view
        ,admin = layui.admin;
        // 导航
        element.render('breadcrumb', 'breadcrumb');
        var userId = view.getOpenParams('userId');
        admin.req({
            type: 'get',
            url: layui.setter.baseUrl + '/sys/user/get',
            data: {
                userId : userId
            },
            error: function(err){
                layer.alert(JSON.stringify(err.field), {
                    title: '错误提示'
                })
            },
            success: function(res){
                if(res.code == 0){
                    $('#userId').val(res.data.userId);
                    $('#userName').val(res.data.userName);
                    $('#nickName').val(res.data.nickName);
                    $('#loginWhiteIp').val(res.data.loginWhiteIp);
                    $('#email').val(res.data.email);
                    $('#mobile').val(res.data.mobile);
                    $("input[name='status'][value='"+res.data.status+"']").attr("checked",true);
                    $("input[name='isSuperAdmin'][value='"+res.data.isSuperAdmin+"']").attr("checked",true);
                    form.render();
                }
            }
        });

        /* 自定义验证规则 */
        form.verify({
            pass: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value != "" && (value.length < 8 || value.length > 16)){
                    return '密码必须8到16位字母和数字组合';
                }
            }
        });

        form.on('submit(userEdit)', function(data) {
            //这里可以写ajax方法提交表单
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/sys/user/update',
                data: data.field,
                success: function(res){
                    if(res.code == 0) {
                        layer.alert(res.msg, {title: "保存成功"}, function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                        });
                    }else {
                        layer.alert(res.msg, {
                            title: '保存失败'
                        }); 
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    })
</script>